<template>
  <a-card :loading="loading" :bordered="false">
    <!-- 业务表单 -->
    <a-form-model ref="form" :model="formData" :form="form" style="margin-top: 8px">
      <!-- 流程Key -->
      <a-form-model-item prop="processDefinedKey" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="流程Key">
        <a-input placeholder="请输入流程Key" v-model="formData.processDefinedKey" disabled />
      </a-form-model-item>
      <!-- 节点key -->
      <a-form-model-item prop="taskKey" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="节点key">
        <a-input placeholder="请输入" v-model="formData.taskKey" disabled />
      </a-form-model-item>
      <!-- 节点名称 -->
      <a-form-model-item prop="taskName" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="节点名称">
        <a-input placeholder="请输入" v-model="formData.taskName" disabled />
      </a-form-model-item>

      <!-- 可否选择下一步处理人 -->
      <a-form-model-item
        prop="canChooseHandler"
        :labelCol="{ span: 5 }"
        :wrapperCol="{ span: 15 }"
        label="可否选择处理人"
      >
        <j-switch v-model="formData.canChooseHandler" :disabled="!editable" :options="[1, 0]" />
      </a-form-model-item>
      <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }">
        <label slot="label">默认处理人</label>
        <a-row :gutter="24">
          <a-col :span="10">
            <a-form-model-item prop="defaultHandlerType" label="处理人类型">
              <j-dict-select-tag
                v-model="formData.defaultHandlerType"
                placeholder="选择处理人类型"
                :disabled="!editable"
                dictCode="process_handle_type"
                @change="
                  data => {
                    $set(formData,'defaultHandlerType',data)
                  }
                "
              />
            </a-form-model-item>
          </a-col>
          <!-- 审批人 -->
          <a-col :span="14">
            <a-form-model-item label="默认处理人">
              <XSearchList
                ref="XSearchList"
                searchIcon
                :searchType="formData.defaultHandlerType"
                v-model="formData.defaultHandlerValue"
                @onselect="setHandlerName"
              ></XSearchList>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model-item>
      <!-- 下一步流程 -->
      <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="选择处理人配置">
        <a-row>
          <a-button @click="ruleList.push({})">添加</a-button>
        </a-row>
        <a-row :gutter="24" v-for="(rule, index) of ruleList" :key="index">
          <!-- <a-col :span="6">
            <a-form-model-item label="任务">
              <a-select v-model="rule.taskKey" placeholder="请选择任务">
                <a-select-option v-for="d in taskKeyOption" :key="d.value" :value="d.value">
                  {{ d.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="10">
            <a-form-model-item label="处理人类型">
              <j-dict-select-tag
                v-model="rule.handlerType"
                placeholder="选择处理人类型"
                :disabled="!editable"
                dictCode="process_handle_type"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="14">
            <a-row type="flex" align="top">
              <a-col flex="1">
                <a-form-model-item label="处理人">
                  <XSearchList
                    ref="XSearchList"
                    searchIcon
                    :searchType="rule.handlerType"
                    v-model="rule.handlerValue"
                    @onselect="setHandlerUser($event, rule)"
                  >
                  </XSearchList>
                </a-form-model-item>
              </a-col>
              <a-col flex="60px">
                <a-popconfirm
                  style="margin-left:15px;margin-top:42px;"
                  title="确定移除该配置?"
                  @confirm="() => removeRuleList(index)"
                >
                  <a-button type="danger">
                    <a-icon type="close-circle" />
                  </a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          </a-col>

          <a-divider />
        </a-row>
      </a-form-model-item>
      <!-- 结点字段配置 -->
      <a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="附加字段配置">
        <a-row>
          <a-button @click="fieldList.push({})">添加</a-button>
        </a-row>
        <a-row :gutter="24" v-for="(field, index) of fieldList" :key="index">
          <a-col :span="4">
            <a-form-model-item label="类型">
              <a-select v-model="field.fieldType" placeholder="请选择字段类型">
                <a-select-option v-for="d in fieldType" :key="d.value" :value="d">
                  {{ d }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="字段名">
              <a-input placeholder="请输入字段名" v-model="field.fieldName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="字段标题">
              <a-input placeholder="请输入标题" v-model="field.fieldTitle" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="字段数据">
              <a-textarea v-model="field.fieldData" :autosize="{ minRows: 1 }"></a-textarea>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-row type="flex" align="top">
              <a-col flex="1">
                <!-- <a-form-model-item label="任务">
                  <a-select v-model="field.taskKey" placeholder="请选择任务">
                    <a-select-option v-for="d in taskKeyOption" :key="d.value" :value="d.value">
                      {{ d.text }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item> -->
                <a-form-model-item label="字段数据">
                  <a-textarea v-model="field.fieldData"></a-textarea>
                </a-form-model-item>
              </a-col>
              <a-col flex="60px">
                <a-popconfirm
                  style="margin-left:15px;margin-top:42px;"
                  title="确定移除该配置?"
                  @confirm="() => removeFieldList(index)"
                >
                  <a-button type="danger">
                    <a-icon type="close-circle" />
                  </a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          </a-col>

          <a-divider />
        </a-row>
      </a-form-model-item>

      <!-- 处理周期 -->
      <a-form-model-item prop="period" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="处理周期">
        <a-input
          type="number"
          placeholder="流程处理周期，按天计算"
          v-model="formData.period"
          :disabled="!editable || editableFiexd['period']"
        />
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import JDate from '@/components/jeecg/JDate.vue'
import JSwitch from '@/components/jeecg/JSwitch.vue'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import XSearchList from '@/components/extends/XSearchList'
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { merge } from 'lodash'
export default {
  name: 'ProcessNode',
  components: {
    JDate,
    JSwitch,
    JSelectDepart,
    JDictSelectTag,
    JSelectMultiUser,
    XSelectUserByDep,
    XSearchList
  },
  model: {
    prop: 'data',
    event: 'onchange'
  },
  props: {
    processDefinitionId: String,
    dataId: String,
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    editable: {
      type: Boolean,
      default: true
    },
    editableFiexd: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: true, //数据加载
      url: {
        add: '/workflow/saveTaskNodeAttr',
        edit: '/workflow/saveTaskNodeAttr',
        queryById: '/workflow/queryTaskNodeAttr',
        nodeList: '/workflow/taskNodeList'
      },
      rules: [],
      form: this.$form.createForm(this), //表单
      formData: {}, //数据
      ruleList: [],
      fieldList: [],
      taskKeyList: [],
      fieldType: ['string', 'int', 'double', 'date', 'radio', 'checkbox', 'select']
    }
  },
  watch: {
    formData: {
      handler(nv, ov) {
        if (!Array.isArray(nv.handlerRuleList)) nv.handlerRuleList = []
        this.ruleList = nv.handlerRuleList ||[]
        this.fieldList = nv.fieldList || []
      }
    }
  },
  computed: {
    taskKeyOption() {
      let that = this
      return this.taskKeyList.filter(item => {
        if (item.taskKey != that.formData.taskKey) {
          return true
        } else {
          return false
        }
      })
    }
  },
  created() {
    if (this.dataId) {
      this.getData(this.dataId)
    }
    this.getTaskKeys()
  },
  methods: {
    getTaskKeys() {
      getAction(this.url.nodeList, { processDefinitionId: this.processDefinitionId }).then(res => {
        if (res.success && Array.isArray(res.result)) {
          this.taskKeyList = res.result.map(item => {
            return {
              text: item.taskName,
              value: item.taskKey
            }
          })
        }
      })
    },
    select() {
      this.$refs.selectUserModal.visible = true
    },
    add(data) {
      this.open(data)
    },
    edit(record) {
      this.open(record)
    },
    open(record) {
      this.formData = Object.assign({}, record)
      if (record.taskKey) {
        this.getData(record.taskKey)
        this.getTaskKeys()
      }
    },
    getData(key) {
      this.loading = true
      getAction(this.url.queryById, { taskKey: key })
        .then(res => {
          this.loading = false
          this.formData = Object.assign({}, this.formData, res.result)
        })
        .finally(() => {
          this.loading = false
        })
    },
    submitForm() {
      const that = this
      return new Promise((resolve, reject) => {
        // 触发表单验证
        that.$refs.form.validate((valid, Field) => {
          if (valid) {
            let httpurl = ''
            let method = ''
            if (!that.formData.id) {
              httpurl += that.url.add
              method = 'post'
            } else {
              httpurl += that.url.add
              method = 'post'
            }
            let formData = merge({}, that.formData)
            httpAction(httpurl, formData, method)
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  resolve(res)
                } else {
                  that.$message.warning(res.message)
                  reject(res.message)
                }
              })
              .finally(() => {
                that.loading = false
              })
          }else{
            that.$message.error('错误',Field)
          }
        })
      })
    },
    setHandlerName(data) {
      this.$set(this.formData,'defaultHandlerDeptName',null)
      this.$set(this.formData,'defaultHandlerName',data.names)
    },
    setHandlerUser(data, item) {
      item.handlerDeptId = ''
      item.handlerDeptName = ''
      item.handlerName = data.names
    },
    removeRuleList(index) {
      this.$delete(this.ruleList, index)
    },
    removeFieldList(index) {
      this.$delete(this.fieldList, index)
    }
  }
}
</script>

<style></style>
